<div [@routerTransition]>
    <div class="m-subheader">
        <div class="d-flex align-items-center">
            <div class="mr-auto col-xs-6">
                <h3 class="m-subheader__title ">
                    <span>原材料数据</span>
                </h3>

                <!-- <span>
                    <span style="margin-left:10px;">选择时间：</span>
                    <div style="width:120px;display:inline-block;">
                        <p-calendar [(ngModel)]="selectedDate" view="month" dateFormat="yy-mm" [yearNavigator]="true" yearRange="2000:2030" [locale]="calendarHelper.cn"></p-calendar>
                    </div>
                </span> -->

                <!-- <span style="margin-left:60px;">车间：</span>
                <div style="width:200px;display:inline-block;">
                    <select #workShopCombobox name="workShopname" class="form-control" [(ngModel)]="workShop">
                        <option *ngFor="let workShopCombobox of workShopComboboxs" [value]="workShopCombobox.value">{{ workShopCombobox.displayText }}</option>
                    </select>
                </div> -->
                <!-- <button class="btn btn-primary" type="button" (click)="getData()" style="margin-left: 20px;">
                    查看数据
                </button> -->
            </div>
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <form class="horizontal-form" autocomplete="off">
                    <div class="m-form m-form--label-align-right">
                        <div class="row align-items-center m--margin-bottom-10">
                            <div class="col-xl-12">
                                <div class="form-group m-form__group align-items-center">
                                    <div class="input-group">
                                        <input [(ngModel)]="filterText" name="filterText" autoFocus class="form-control m-input" [placeholder]="l('SearchWithThreeDot')"
                                            type="text">
                                        <span class="input-group-btn">
                                            <button (click)="getData()" class="btn btn-primary" type="submit">
                                                <i class="flaticon-search-1" [attr.aria-label]="l('Search')"></i>
                                            </button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

                <div class="row align-items-center">
                    <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                        <p-table #dataTable (onLazyLoad)="getData($event)" [value]="primengTableHelper.records" rows="{{ primengTableHelper.defaultRecordsCountPerPage }}"
                            [paginator]="false" [lazy]="true" [scrollable]="true" ScrollWidth="100%" [responsive]="primengTableHelper.isResponsive"
                            [resizableColumns]="primengTableHelper.resizableColumns">
                            <ng-template pTemplate="header">
                                <tr>
                                    <th style="width: 80px">
                                        年
                                    </th>
                                    <th style="width: 80px">
                                        月
                                    </th>
                                    <th style="width: 120px">
                                        车间
                                    </th>
                                    <th style="width: 220px">
                                        条码
                                    </th>
                                    <th style="width: 200px">
                                        产品信息
                                    </th>
                                    <th style="width: 120px">
                                        成本
                                    </th>
                                    <th style="width: 120px">
                                        是否计算
                                    </th>
                                    <th style="width: 170px">
                                        出库单号
                                    </th>
                                    <th style="width: 120px">
                                        出库日期
                                    </th>
                                    <th style="width: 120px">
                                        领用单位
                                    </th>
                                </tr>
                            </ng-template>
                            <ng-template pTemplate="body" let-record="$implicit">
                                <tr>
                                    <td style="width: 80px">
                                        <span class="ui-column-title">年</span>
                                        {{ record.time.year }}
                                    </td>
                                    <td style="width: 80px">
                                        <span class="ui-column-title">月</span>
                                        {{ record.time.month }}
                                    </td>
                                    <td style="width: 120px">
                                        <span class="ui-column-title">车间</span>
                                        {{ record.workshop }}
                                    </td>
                                    <td style="width: 220px">
                                        <span class="ui-column-title">条码</span>
                                        {{ record.batches?.value }}
                                    </td>

                                    <th style="width: 200px">
                                        <div>{{ record.taskNum }}</div> 
                                        <small style="font-size: 0.82em; opacity:.5;">{{record.productId }}{{ record.productName }}</small> 
                                    </th>
                                    <td style="width: 120px">
                                        {{ record.detail?.amount }}
                                    </td>

                                    <td style="width: 120px">
                                        <span class="label m-badge m-badge--success m-badge--wide" *ngIf="record.isAccounted">
                                            {{l('Yes')}}
                                        </span>
                                        <span class="label m-badge m-badge--metal m-badge--wide" *ngIf="!record.isAccounted">
                                            {{l('No')}}
                                        </span>
                                    </td>

                                    <td style="width: 170px">
                                        {{ record.extend['出库单号'] }}
                                    </td>
                                    <td style="width: 120px">
                                        {{ record.extend['出库日期'] }}
                                    </td>
                                    <td style="width: 120px">
                                        {{ record.extend['领用单位'] }}
                                    </td>
                                </tr>
                            </ng-template>
                        </p-table>

                        <div class="primeng-paging-container">
                            <p-paginator rows="{{ primengTableHelper.defaultRecordsCountPerPage }}" #paginator (onPageChange)="getData($event)" [totalRecords]="primengTableHelper.totalRecordsCount"
                                [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                            </p-paginator>
                            <span class="total-records-count">
                                {{ l('TotalRecordsCount', primengTableHelper.totalRecordsCount) }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
